<template>
  <a-config-provider :get-popup-container="getPopupContainer" :locale="zhCN">
    <router-view />
  </a-config-provider>
</template>

<script setup lang="ts">
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { onMounted } from 'vue';
const getPopupContainer = (el: any, dialogContext: { getDialogWrap: () => any }) => {
  if (dialogContext) {
    return dialogContext.getDialogWrap();
  } else {
    return document.body;
  }
};
const setTheme = () => {
  const theme = {
    theme: 'purple',
    mode: 'tint',
  };
  const element: HTMLElement = document.documentElement;
  element.className.split(' ').forEach(className => {
    if (/^(dark|tint|triascloud-theme-.*?)$/.test(className)) {
      element.classList.remove(className);
    }
  });
  element.classList.add(`triascloud-theme-${theme.theme}`);
  element.classList.add(theme.mode);
};
onMounted(() => {
  setTheme();
});
</script>

<style>
body *::-webkit-scrollbar-thumb {
  border-radius: 4px;
  box-shadow: inset 0 0 7px rgba(0, 0, 0, 0.1);
  background-color: var(--scroll-track);
}
body *::-webkit-scrollbar-track {
  background: var(--scroll-bg);
  box-shadow: 0 0 7px var(--scroll-track) inset;
}
body *::selection {
  color: #fff;
  background: var(--primary);
}
body *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
</style>
